<template>
  <view class="expendIndex">
    <view class="expendTop">
      <view class="timeSelect">2019-10月<text>></text></view>
      <view class="topNav common-tab">
        <view class="navItem common-tab-text" :class="{active:i.index == tabNum,text:i.index == tabNum}" v-for="(i,index) in navList" :key = 'index' @click="handelTabItem(i)">{{i.item}}</view>
      </view>
    </view>
    <view class="expendList">
      <view class="expendTotal">
        <view class="expendTotal-txt">支出合计</view>
        <view class="expendTotal-money"><text>￥</text>5002</view>
      </view>
      <view class="incomeIncome">
        <view class="incomeIncome-txt">收入构成</view>
        <view class="incomeIncomeItme">
          <view class="incomeIncomeItme-l">
            <view class="incomeIncomeItme-l-img">
              
            </view>
            <view class="incomeIncomeItme-l-txt">推广收益</view>
          </view>
          <view class="incomeIncomeItme-r">
            <view class="incomeIncomeItme-r-money">
              ￥500
            </view>
            <view class="incomeIncomeItme-r-">
              
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data () {
      return {
        navList: [
          {index:'0',item:'支出'},
          {index:'1',item:'收入'}
        ],
        tabNum:0,
      }
    },
    methods: {
      handelTabItem (item) {
        this.tabNum = item.index;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .expendIndex {
    .expendTop {
      display: flex;
      justify-content: space-between;
      padding: 36rpx 26rpx 39rpx 53rpx;
      .timeSelect {
        font-size:28rpx;
        font-weight:500;
        color:rgba(51,51,51,1);
      }
      .detailMoney {
        font-size:24rpx;
        font-weight:500;
        margin-top: 23rpx;
        color:rgba(153,153,153,1);
        .expendMoney {
          margin-left: 28rpx;
        }
      }
      .topNav {
        .navItem　{
          margin-left: 77rpx;
          font-size:28rpx;
          font-weight:500;
          color:rgba(51,51,51,1);
        } 
      }
    }
    .expendList {
      padding: 23rpx 0  0 53rpx;
      background-color: #FFFFFF;
      min-height: calc(100vh - 68px);
      .expendTotal {
        .expendTotal-txt {
          font-size:26rpx;
          font-weight:500;
          color:rgba(153,153,153,1);
        }
        .expendTotal-money {
          margin-top: 29rpx;
          font-size:42rpx;
          color:rgba(51,51,51,1);
          text {
            font-size:30rpx;
          }
        }
      }
      .incomeIncome {
        margin-top: 64rpx;
        .incomeIncome-txt {
          font-size:26rpx;
          font-weight:500;
          color:rgba(153,153,153,1);
        }
      }
      .incomeIncomeItme {
        padding: 0 23rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(225,225,225,1);
      }
    }
  }
</style>
